<template>
	<view>
    <view  class="wrappr" v-show="!showimg">
		<view class="item" v-for="(item, i) in list" :key="item.id">
			<view class="left">
				<view class="name">{{item.store_name}}</view>
				<view class="date">{{item.addtime}}</view>
			</view>
			<view class="right" v-if="item.outmoney<0">-{{item.outmoney}}</view>
			<view class="right" v-else>{{item.inmoney}}</view>
		</view>
  </view>
    <!-- 无内容默认图片 -->
    <view v-show="list.length===0">
      <defaultImg msg="暂无交易记录"></defaultImg>
    </view>
		<view v-show="list.length!==0">
			<u-loadmore :status="more" @loadmore="getMore"></u-loadmore>
		</view>
		
	</view>
</template>

<script>
import defaultImg from '@/components/defaultImg/defaultImg.vue' //默认图片组件
	export default {
    components: {
      defaultImg,
    },
	  data() {
	    return {
	      total: 0,
				pageIndex: 1,
				list: [],
				showText: false,
				type: '0',
				text: '',
        showimg: false,
				more:''
	    }
	  },
		computed: {
			storeid(){
				return this.$store.state.userInfoDetail.store.storeId
			},
		},
		onLoad(e){
			this.type = e.type
			uni.setNavigationBarTitle({
			  title: e.type == '0' ? '交易中' : '结算中'
			})
		},
		onReachBottom(){
			this.getList()
		},
		created() {
			this.getList()
		},
		methods:{
			getMore(){
				this.getList()
			},
			getList(){
				this.more = 'loading'
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				this.$api.user.getTradingList({
					PageIndex: this.pageIndex,
					PageSize: 10,
					storeid: this.storeid,
					type: Number(this.type)
				}).then(res => {
					uni.hideLoading()
					this.list = [...this.list, ...res.data.list]
					if (res.data.total <= 10) {
					  this.more = 'nomore'
					} else {
					  this.moreStatus(res.data.list.length !== 0 ? 'loadmore' : 'nomore')
					}
					if (res.data.list.length === 0) return false
					this.pageIndex += 1 // 当前页加1
				}).catch( e => {
					uni.hideLoading()
				})
			},
			// 加载前、中、后
			moreStatus(status) {
			  this.more = status
			},
			reLoad(){
				if(this.text === '加载失败，点击重新加载'){
					this.pageIndex = 1;
					this.total = 0;
					this.showText = false;
					this.text = '';
					this.getList()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrappr {
		padding: 10rpx 24rpx;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.14);
		border-radius: 10px;
		
		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			margin: 0 20rpx;
			border-bottom: 2rpx solid #eee;
			
			.left {
				.name {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					padding-bottom: 15rpx;
				}
				
				.date {
					font-size: 26rpx;
					font-weight: 500;
					color: #999999;
				}
			}
			
			.right {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}
		}
		
		.footer {
			padding: 10rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
		}
	}
</style>
